<template>
<div :class="'box' + num" ref="box">
        <div class="recommend">
            <router-link tag="div" class="pro_list" v-for="item in leftProList" :to="{name: 'detail', params: {id: item.proid}}" :key="item.proid">
                <div class="list_img">
                    <img :src="item.img1" alt="">
                </div>
                <div class="list_info">
                    <div class="title"><p class="van-multi-ellipsis--l2">{{ item.proname }}</p></div>
                    <span class="price">￥{{ item.originprice.toFixed(2) }}</span>
                    <div class="logistics"><span>嗨购物流</span><i>看相似</i></div>
                </div>
            </router-link>
        </div>
        <div class="recommend">
            <router-link tag="div" class="pro_list" v-for="item in rightProList" :to="{name: 'detail', params: {id: item.proid}}" :key="item.proid">
                <div class="list_img">
                    <img :src="item.img1" alt="">
                </div>
                <div class="list_info">
                    <div class="title"><p class="van-multi-ellipsis--l2">{{ item.proname }}</p></div>
                    <span class="price">￥{{ item.originprice.toFixed(2) }}</span>
                    <div class="logistics"><span>嗨购物流</span><i>看相似</i></div>
                </div>
            </router-link>
        </div>
        <!-- <div :class="'recommend' + num">
            <div class="pro_list" v-for="item in proList" :key="item.proid">
                <div class="list_img">
                    <img :src="item.img1" alt="">
                </div>
                <div class="list_info">
                    <div class="title"><p class="van-multi-ellipsis--l2">{{ item.proname }}</p></div>
                    <span class="price">￥{{ item.originprice.toFixed(2) }}</span>
                    <div class="logistics"><span>嗨购物流</span><a href="">看相似</a></div>
                </div>
            </div>
        </div> -->
        <div class="switch_sty" @click="num=num===1?2:1" ref="sty">
            <van-icon v-show="num===2" name="apps-o" color="white" size="20px" />
            <van-icon v-show="num===1" name="wap-nav" color="white" size="20px" />
        </div>
</div>
</template>
<script>
export default ({
  data () {
    return {
      num: 1,
      leftProList: [],
      rightProList: []
    }
  },
  props: {
    proList: {
      default: () => ['']
    }
  },
  methods: {},
  mounted () {
  },
  watch: {
    proList: {
      immediate: true,
      leep: true,
      handler (newval, oldval) {
        newval.forEach((element, index) => {
          if (oldval) {
            if (newval.length <= oldval.length) {
              this.leftProList = []
              this.rightProList = []
            }
            if (index >= oldval.length) {
              if (index % 2 === 0) {
                this.leftProList.push(element)
              } else {
                this.rightProList.push(element)
              }
            }
          } else {
            if (index % 2 === 0) {
              this.leftProList.push(element)
            } else {
              this.rightProList.push(element)
            }
          }
        })
      }
    }
  }
})
</script>

<style lang="stylus" scoped>
.box1
    padding 0 .625rem
    display flex
    justify-content space-between
    .recommend
        width 48%
        .pro_list
            float left
            display flex
            flex-direction column
            border-radius .5rem
            overflow hidden
            background-color white
            width 100%
            margin-bottom 5%
            break-inside avoid
            .list_img
                width 100%
                img
                    width 100%
            .list_info
                display flex
                flex-direction column
                padding .625rem
                box-sizing border-box
                .title
                    font-size .875rem
                .price
                    color #e54847
                .logistics
                    display flex
                    justify-content space-between
                    align-items center
                    font-size .75rem
                    span
                        color rgb(153,153,153)
                    i
                        padding .125rem .375rem
                        background-color rgb(242,242,242)
                        color black
                        font-size .75rem
                        border-radius .9375rem
                        font-style normal
.box2
    padding 0
    .recommend
        width 100%
        box-sizing border-box
        display flex
        flex-direction column
        padding 0 .625rem
        .pro_list
            display flex
            border-radius .5rem
            overflow hidden
            background-color white
            height 7.5rem
            margin-bottom 2%
            .list_img
                height 100%
                width 7.5rem
                padding .625rem
                box-sizing border-box
                img
                    width 100%
                    height 100%
            .list_info
                flex 1
                display flex
                flex-direction column
                padding .625rem
                box-sizing border-box
                justify-content space-between
                .title
                    font-size .875rem
                .price
                    color #e54847
                .logistics
                    display flex
                    justify-content space-between
                    align-items center
                    font-size .75rem
                    span
                        color rgb(153,153,153)
                    i
                        padding .125rem .375rem
                        background-color rgb(242,242,242)
                        color black
                        font-size .75rem
                        border-radius .9375rem
                        font-style normal
.switch_sty
    position fixed
    bottom 3.75rem
    right 1.25rem
    background-color rgba(0,0,0,0.3)
    border-radius 50%
    width 1.875rem
    height 1.875rem
    display flex
    justify-content center
    align-items center
</style>
